<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无人机外卖配送实时监控平台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 基础样式与布局 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0c1b33, #0a1429);
            color: #e0f0ff;
            overflow: hidden; /* 禁止滚动条 */
            min-width: 1280px;
        }
        
        .container {
            width: 100%;
            height: 100vh;
            padding: 10px;
            display: grid;
            grid-template-columns: 1.1fr 2.6fr 1.1fr;
            grid-template-rows: 70px 1.2fr 1.2fr 1fr;
            grid-gap: 10px;
            max-width: 1920px;
            margin: 0 auto;
        }

        /* 头部样式 */
        .header {
            grid-column: 1 / 4;
            background: rgba(16, 35, 67, 0.7);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px;
            border: 1px solid rgba(64, 158, 255, 0.3);
            box-shadow: 0 0 25px rgba(0, 150, 255, 0.15);
        }
        
        .title {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #00f2fe, #4facfe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .time-area {
            text-align: right;
        }
        
        .date {
            font-size: 14px;
            color: #4facfe;
        }
        
        .time {
            font-size: 18px;
            font-weight: bold;
            color: #00f2fe;
        }

        /* 卡片组件样式 */
        .card {
            background: rgba(16, 35, 67, 0.7);
            border-radius: 8px;
            padding: 12px;
            border: 1px solid rgba(64, 158, 255, 0.3);
            box-shadow: 0 0 12px rgba(0, 150, 255, 0.1);
            display: flex;
            flex-direction: column;
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(to right, #00f2fe, #4facfe);
        }
        
        .card-title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #4facfe;
            display: flex;
            align-items: center;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(79, 172, 254, 0.3);
            position: relative;
        }
        
        .card-title i {
            margin-right: 6px;
            font-size: 18px;
        }

        /* 统计数据样式 */
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
            flex: 1;
        }
        
        .stat-item {
            background: rgba(30, 60, 110, 0.5);
            border-radius: 6px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .stat-label {
            font-size: 12px;
            color: #8bb4e5;
            margin-bottom: 4px;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #00f2fe;
        }
        
        .stat-trend {
            font-size: 10px;
            color: #4ade80;
            margin-top: 2px;
        }
        
        .negative {
            color: #f87171;
        }

        /* 图表容器样式 */
        .chart-container {
            width: 100%;
            height: calc(100% - 30px);
        }

        /* 地图相关样式 */
        .map-container {
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            position: relative;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .map-card {
            grid-row: 2 / 4; /* 跨2行 */
            grid-column: 2;
            position: relative;
        }
        
        .weather-info {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            z-index: 10;
            display: flex;
            align-items: center;
        }
        
        .weather-icon {
            margin-right: 5px;
            font-size: 14px;
        }
        
        /* 地图元素样式 */
        .map-point {
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        
        .map-line {
            position: absolute;
            height: 2px;
            background: rgba(79, 172, 254, 0.4);
            transform-origin: 0 0;
            z-index: 5;
        }
        
        .map-drone {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4ade80;
            box-shadow: 0 0 6px #4ade80;
            transform: translate(-50%, -50%);
            z-index: 15;
            transition: left 3s linear, top 3s linear;
        }
        
        .restricted-zone {
            position: absolute;
            border: 2px dashed #f87171;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
            pointer-events: none;
            z-index: 8;
        }

        /* 无人机列表样式 */
        .drone-list {
            height: 100%;
            overflow-y: auto;
            padding-right: 5px;
        }
        
        .drone-item {
            background: rgba(30, 60, 110, 0.5);
            border-radius: 6px;
            padding: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            border-left: 2px solid #00f2fe;
        }
        
        .drone-icon {
            width: 30px;
            height: 30px;
            background: rgba(0, 242, 254, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            flex-shrink: 0;
        }
        
        .drone-info {
            flex: 1;
            min-width: 0;
        }
        
        .drone-id {
            font-weight: bold;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .drone-status {
            font-size: 11px;
            color: #8bb4e5;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 2px;
        }
        
        .drone-location {
            font-size: 11px;
            color: #4facfe;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }

        /* 进度环样式 */
        .progress-ring {
            width: 45px;
            height: 45px;
            position: relative;
            flex-shrink: 0;
        }
        
        .progress-circle {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        
        .progress-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.1);
            stroke-width: 3;
        }
        
        .progress-value {
            fill: none;
            stroke: #00f2fe;
            stroke-width: 3;
            stroke-dasharray: 0 100;
            transition: stroke-dasharray 0.5s ease;
        }
        
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            font-weight: bold;
            color: #00f2fe;
        }

        /* 区域控制按钮样式 */
        .zone-controls {
            display: flex;
            margin-top: 8px;
            gap: 6px;
        }
        
        .zone-btn {
            flex: 1;
            padding: 5px;
            background: rgba(30, 60, 110, 0.5);
            border: 1px solid rgba(64, 158, 255, 0.3);
            border-radius: 4px;
            color: #4facfe;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
        }
        
        .zone-btn.active {
            background: rgba(0, 242, 254, 0.2);
            border-color: #00f2fe;
        }

        /* 滚动条美化 */
        .drone-list::-webkit-scrollbar {
            width: 4px;
        }
        
        .drone-list::-webkit-scrollbar-thumb {
            background: rgba(79, 172, 254, 0.6);
            border-radius: 2px;
        }

        /* 动画效果 */
        @keyframes highlight {
            0% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(0, 242, 254, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
        }
        
        .highlight {
            animation: highlight 1.5s ease;
        }

        /* 状态标签样式 */
        .drone-status-tag {
            display: inline-block;
            padding: 2px 4px;
            border-radius: 2px;
            font-size: 10px;
            margin-right: 3px;
        }
        
        .status-delivering { background: rgba(0, 242, 254, 0.15); color: #00f2fe; }
        .status-returning { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
        .status-standby { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
        .status-maintenance { background: rgba(248, 113, 113, 0.15); color: #f87171; }
        .battery-low { background: rgba(248, 113, 113, 0.15); color: #f87171; }
        .battery-medium { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
        .battery-high { background: rgba(74, 222, 128, 0.15); color: #4ade80; }

        /* 紧凑统计项样式 */
        .compact-stats {
            display: flex;
            justify-content: space-between;
            gap: 6px;
        }
        
        .compact-stat {
            flex: 1;
            text-align: center;
            padding: 6px;
            background: rgba(30, 60, 110, 0.5);
            border-radius: 5px;
        }
        
        .compact-value {
            font-size: 16px;
            font-weight: bold;
            color: #00f2fe;
        }
        
        .compact-label {
            font-size: 10px;
            color: #8bb4e5;
            margin-top: 2px;
        }

        /* 网格布局辅助类 */
        .grid-full { grid-column: 1 / 4; }
        .grid-2col { grid-column: 1 / 3; }

        /* 响应式调整 */
        @media (max-width: 1600px) {
            .container { grid-template-columns: 1.1fr 2.4fr 1.1fr; }
        }
        
        @media (max-width: 1400px) {
            .container { grid-template-columns: 1fr 2.2fr 1fr; }
        }
        
        @media (max-width: 1280px) {
            .container { grid-template-columns: 1fr 2fr 1fr; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="title">无人机外卖配送实时监控平台</div>
            <div class="time-area">
                <div class="date">2023年10月15日</div>
                <div class="time">14:28:36</div>
            </div>
        </div>
        
        <!-- 左侧统计区域 -->
        <div class="card">
            <div class="card-title"><i>📊</i> 核心指标</div>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-label">今日订单总数</div>
                    <div class="stat-value">1,248</div>
                    <div class="stat-trend">↑12.5% 较昨日</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">配送中订单</div>
                    <div class="stat-value">86</div>
                    <div class="stat-trend">↓3.2% 较1小时前</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">平均配送时间</div>
                    <div class="stat-value">18.6<span style="font-size:12px">分钟</span></div>
                    <div class="stat-trend">↓2.1分钟 较昨日</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">准时送达率</div>
                    <div class="stat-value">98.7%</div>
                    <div class="stat-trend">↑0.8% 较上周</div>
                </div>
            </div>
        </div>
        
        <!-- 中间地图区域 -->
        <div class="card map-card">
            <div class="card-title"><i>📍</i> 实时配送地图</div>
            <div class="map-container" id="map">
                <div class="weather-info">
                    <span class="weather-icon">🌤️</span> 晴朗 26°C | 风速: 8km/h
                </div>
            </div>
        </div>
        
        <!-- 右侧无人机状态 -->
        <div class="card">
            <div class="card-title"><i>🚁</i> 无人机状态</div>
            <div class="compact-stats">
                <div class="compact-stat">
                    <div class="compact-value">42</div>
                    <div class="compact-label">可用无人机</div>
                    <div class="stat-trend">在线率 93.3%</div>
                </div>
                <div class="compact-stat">
                    <div class="compact-value">32</div>
                    <div class="compact-label">配送中</div>
                    <div class="stat-trend">负载率 76.2%</div>
                </div>
                <div class="compact-stat">
                    <div class="compact-value">8</div>
                    <div class="compact-label">待机中</div>
                    <div class="stat-trend">可用率 19.0%</div>
                </div>
                <div class="compact-stat">
                    <div class="compact-value">2</div>
                    <div class="compact-label">维护中</div>
                    <div class="stat-trend negative">↓1 较昨日</div>
                </div>
            </div>
        </div>
        
        <!-- 左侧配送区域分析 -->
        <div class="card">
            <div class="card-title"><i>🗺️</i> 配送区域与空域管理</div>
            <div class="chart-container" id="zoneChart"></div>
            <div class="zone-controls">
                <button class="zone-btn active">商业区</button>
                <button class="zone-btn">住宅区</button>
                <button class="zone-btn">大学城</button>
            </div>
        </div>
        
        <!-- 右侧无人机列表 -->
        <div class="card">
            <div class="card-title"><i>🛸</i> 无人机实时位置</div>
            <div class="drone-list" id="droneList">
                <!-- 动态生成无人机列表 -->
            </div>
        </div>
        
        <!-- 底部订单趋势分析（全宽卡片） -->
        <div class="card grid-full">
            <div class="card-title"><i>📈</i> 订单趋势分析</div>
            <div class="chart-container" id="trendChart"></div>
        </div>
    </div>

    <script>
        // 1. 时间更新模块
        function initTimeUpdate() {
            function updateTime() {
                const now = new Date();
                const dateStr = now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
                const timeStr = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
                
                document.querySelector('.date').textContent = dateStr;
                document.querySelector('.time').textContent = timeStr;
            }
            
            setInterval(updateTime, 1000);
            updateTime();
        }

        // 2. 图表初始化模块
        function initCharts() {
            const zoneChart = echarts.init(document.getElementById('zoneChart'));
            const trendChart = echarts.init(document.getElementById('trendChart'));
            
            // 区域分布图表
            zoneChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}架 ({d}%)',
                    backgroundColor: 'rgba(16, 35, 67, 0.9)',
                    textStyle: { color: '#e0f0ff', fontSize: 12 }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    textStyle: { color: '#8bb4e5', fontSize: 11 }
                },
                series: [{
                    name: '区域分布',
                    type: 'pie',
                    radius: ['35%', '65%'],
                    itemStyle: { borderRadius: 6, borderWidth: 1 },
                    label: { show: false },
                    emphasis: { label: { show: true, fontSize: 13, color: '#00f2fe' } },
                    data: [
                        { value: 12, name: '商业中心', itemStyle: { color: '#00f2fe' } },
                        { value: 8, name: '住宅西区', itemStyle: { color: '#4facfe' } },
                        { value: 7, name: '科技园区', itemStyle: { color: '#4ade80' } },
                        { value: 5, name: '大学城区', itemStyle: { color: '#fbbf24' } },
                        { value: 4, name: '住宅东区', itemStyle: { color: '#f87171' } }
                    ]
                }]
            });
            
            // 订单趋势图表
            trendChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(16, 35, 67, 0.9)',
                    textStyle: { color: '#e0f0ff', fontSize: 12 }
                },
                legend: {
                    data: ['订单量', '平均配送时间'],
                    textStyle: { color: '#8bb4e5', fontSize: 12 },
                    top: 0
                },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisLabel: { color: '#8bb4e5', fontSize: 12 }
                },
                yAxis: [
                    { type: 'value', name: '订单量', axisLabel: { color: '#8bb4e5', fontSize: 12 } },
                    { type: 'value', name: '分钟', axisLabel: { color: '#8bb4e5', fontSize: 12 } }
                ],
                series: [
                    { name: '订单量', type: 'bar', data: [980, 1045, 1120, 1248, 1180, 1350, 1260], barWidth: '20%' },
                    { name: '平均配送时间', type: 'line', yAxisIndex: 1, data: [19.2, 18.8, 18.5, 18.2, 18.6, 19.8, 20.5],
                      lineStyle: { width: 2 }, symbolSize: 6 }
                ]
            });
            
            // 响应式调整
            window.addEventListener('resize', () => {
                zoneChart.resize();
                trendChart.resize();
            });
        }

        // 3. 生成无人机列表
        function createDroneList() {
            const droneList = document.getElementById('droneList');
            const drones = [
                { id: 'DR-1001', status: '配送中', location: '科技园A区', battery: 78, speed: '32km/h', altitude: '120m' },
                { id: 'DR-1002', status: '待机中', location: '中央配送站', battery: 95, speed: '0km/h', altitude: '0m' },
                { id: 'DR-1003', status: '配送中', location: '大学城南', battery: 65, speed: '28km/h', altitude: '100m' },
                { id: 'DR-1004', status: '返回中', location: '商业中心', battery: 42, speed: '35km/h', altitude: '150m' },
                { id: 'DR-1005', status: '配送中', location: '住宅西区', battery: 58, speed: '30km/h', altitude: '90m' },
                { id: 'DR-1006', status: '维护中', location: '维修中心', battery: 100, speed: '0km/h', altitude: '0m' }
            ];
            
            drones.forEach(drone => {
                const statusClass = drone.status === '配送中' ? 'status-delivering' : 
                                  drone.status === '返回中' ? 'status-returning' : 
                                  drone.status === '待机中' ? 'status-standby' : 'status-maintenance';
                const batteryClass = drone.battery < 30 ? 'battery-low' : 
                                   drone.battery < 60 ? 'battery-medium' : 'battery-high';
                
                droneList.innerHTML += `
                    <div class="drone-item">
                        <div class="drone-icon">🚁</div>
                        <div class="drone-info">
                            <div class="drone-id">${drone.id}</div>
                            <div class="drone-status">
                                <span class="drone-status-tag ${statusClass}">${drone.status}</span>
                                <span class="drone-status-tag ${batteryClass}">电量: ${drone.battery}%</span>
                                <span class="drone-status-tag">${drone.speed}</span>
                                <span class="drone-status-tag">${drone.altitude}</span>
                            </div>
                            <div class="drone-location">位置: ${drone.location}</div>
                        </div>
                        <div class="progress-ring">
                            <svg class="progress-circle" width="45" height="45" viewBox="0 0 45 45">
                                <circle class="progress-bg" cx="22.5" cy="22.5" r="17"></circle>
                                <circle class="progress-value" cx="22.5" cy="22.5" r="17" 
                                        stroke="${drone.battery < 30 ? '#f87171' : drone.battery < 60 ? '#fbbf24' : '#00f2fe'}"
                                        stroke-dasharray="${drone.battery} ${100 - drone.battery}"></circle>
                            </svg>
                            <div class="progress-text">${drone.battery}%</div>
                        </div>
                    </div>
                `;
            });
        }

        // 4. 初始化地图元素
        function initMapElements() {
            const map = document.getElementById('map');
            
            // 配送中心
            const center = document.createElement('div');
            center.className = 'map-point';
            center.style.left = '50%';
            center.style.top = '50%';
            center.style.width = '16px';
            center.style.height = '16px';
            center.style.background = '#4facfe';
            center.style.boxShadow = '0 0 10px #4facfe';
            map.appendChild(center);
            
            // 配送点
            const points = [
                { left: '35%', top: '30%', color: '#00f2fe', label: '科技园A区' },
                { left: '60%', top: '25%', color: '#00f2fe', label: '商业中心' },
                { left: '45%', top: '65%', color: '#00f2fe', label: '住宅西区' },
                { left: '70%', top: '40%', color: '#00f2fe', label: '大学城北' },
                { left: '30%', top: '60%', color: '#00f2fe', label: '住宅东区' },
                { left: '55%', top: '75%', color: '#4ade80', label: '科技园B区' },
                { left: '65%', top: '65%', color: '#4ade80', label: '大学城南' }
            ];
            
            points.forEach(point => {
                const pt = document.createElement('div');
                pt.className = 'map-point';
                pt.style.left = point.left;
                pt.style.top = point.top;
                pt.style.width = '12px';
                pt.style.height = '12px';
                pt.style.background = point.color;
                pt.style.boxShadow = `0 0 8px ${point.color}`;
                map.appendChild(pt);
                
                const label = document.createElement('div');
                label.className = 'map-label';
                label.textContent = point.label;
                label.style.position = 'absolute';
                label.style.left = point.left;
                label.style.top = `calc(${point.top} + 8px)`;
                label.style.fontSize = '10px';
                label.style.transform = 'translateX(-50%)';
                label.style.color = '#e0f0ff';
                map.appendChild(label);
            });
            
            // 配送路径和无人机
            const paths = [
                { from: [50, 50], to: [35, 30], angle: -30, length: 22 },
                { from: [50, 50], to: [60, 25], angle: 15, length: 27 },
                { from: [50, 50], to: [45, 65], angle: -15, length: 16 },
                { from: [50, 50], to: [70, 40], angle: 25, length: 22 },
                { from: [50, 50], to: [30, 60], angle: -45, length: 22 },
                { from: [50, 50], to: [55, 75], angle: -60, length: 27 }
            ];
            
            paths.forEach(path => {
                // 路径线
                const line = document.createElement('div');
                line.className = 'map-line';
                line.style.left = `${path.from[0]}%`;
                line.style.top = `${path.from[1]}%`;
                line.style.width = `${path.length}%`;
                line.style.transform = `rotate(${path.angle}deg)`;
                map.appendChild(line);
                
                // 移动无人机
                const drone = document.createElement('div');
                drone.className = 'map-drone';
                drone.style.left = `${path.from[0]}%`;
                drone.style.top = `${path.from[1]}%`;
                map.appendChild(drone);
                
                setTimeout(() => {
                    drone.style.transition = 'left 6s linear, top 6s linear';
                    drone.style.left = `${path.to[0]}%`;
                    drone.style.top = `${path.to[1]}%`;
                }, 100);
            });
            
            // 禁飞区
            const restricted = document.createElement('div');
            restricted.className = 'restricted-zone';
            restricted.style.left = '60%';
            restricted.style.top = '60%';
            restricted.style.width = '60px';
            restricted.style.height = '60px';
            map.appendChild(restricted);
        }

        // 5. 动态数据更新
        function initDynamicUpdates() {
            setInterval(() => {
                // 更新配送中订单数
                const delivering = document.querySelectorAll('.stat-item')[1].querySelector('.stat-value');
                delivering.textContent = Math.max(80, Math.min(95, parseInt(delivering.textContent) + (Math.random() > 0.5 ? 1 : -1)));
                
                // 更新无人机电量
                document.querySelectorAll('.progress-value').forEach(el => {
                    const battery = parseInt(el.style.strokeDasharray.split(' ')[0]);
                    const newBattery = Math.max(10, Math.min(100, battery + (Math.random() > 0.5 ? 1 : -1)));
                    el.style.strokeDasharray = `${newBattery} ${100 - newBattery}`;
                    el.nextElementSibling.textContent = `${newBattery}%`;
                });
            }, 3000);
        }

        // 6. 区域按钮交互
        function initZoneControls() {
            document.querySelectorAll('.zone-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    document.querySelectorAll('.zone-btn').forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                });
            });
        }

        // 初始化
        window.addEventListener('load', () => {
            initTimeUpdate();
            initCharts();
            createDroneList();
            initMapElements();
            initDynamicUpdates();
            initZoneControls();
        });
    </script>
</body>
</html>